<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<form #form="ngForm" (ngSubmit)="submit(form.value)">
    <fieldset ngModelGroup="name">
        <div class="field">
            <label>First Name</label>
            <jigsaw-input [ngModel]="firstName" width="250px" name="firstname"></jigsaw-input>
        </div>

        <div class="field">
            <label>Last Name *</label>
            <jigsaw-input width="250px" name="lastname" ngModel required minlength="5"
                          [pattern]="lastNamePattern" #lastname="ngModel"
                          [valid]="lastname.valid || lastname.pristine || lastname.touched">
            </jigsaw-input>
            <span [hidden]="lastname.valid || lastname.pristine || lastname.touched" class="error">
                Last name should be more than 5 alphabets.
            </span>
        </div>
    </fieldset>
    <div class="field">
        <label>Gender *</label>
        <jigsaw-radios ngModel name="gender" trackItemBy="id" required>
            <jigsaw-radio-option *ngFor="let item of [{label: 'Male', id: 0},{label: 'Female', id: 1}]" [value]="item">
                {{item.label}}
            </jigsaw-radio-option>
        </jigsaw-radios>
    </div>
    <div class="field">
        <label>Birthday</label>
        <jigsaw-time name="birthday" [(ngModel)]="birthday" width="250px"></jigsaw-time>
    </div>
    <div class="field">
        <label>A Range Time</label>
        <!-- ngModel加在ng-template里的组件上会无效 -->
        <jigsaw-combo-select [(ngModel)]="rangeTimeComboValue" name="lastJobDuring" width="250px">
            <ng-template>
                <jigsaw-range-time [(beginDate)]="rangeTime.beginDate"
                                   [(endDate)]="rangeTime.endDate"
                                   (change)="onDateChange()"></jigsaw-range-time>
            </ng-template>
        </jigsaw-combo-select>
    </div>
    <div class="field">
        <label>Come From</label>
        <jigsaw-select [(ngModel)]="comeFrom" name="comeFrom" placeholder="Where are you come from"
                       width="250px" [optionCount]="5"
                       [data]="[
                            {label: 'Bei Jing'}, {label: 'Shang Hai'}, {label: 'Nan Jing'}, {label: 'Shen Zhen'},
                            {label: 'Chang Sha'}, {label: 'Cheng Du'}, {label: 'Chong Qing'}, {label: 'Hong Kong'},
                            {label: 'Tai Wan'}, {label: 'Xi An'}
                       ]">
        </jigsaw-select>
    </div>
    <div class="field">
        <label>Favorite Fruit</label>
        <!--
            TIPS:
            jigsaw-combo-select it self is form-friendly, so you can compose any form-unfriendly components
            with jigsaw-combo-select to make it form-friendly.
            for example, jigsaw-table is not form-friendly, you can still use jigsaw-table in the form, just simply
            compose it with jigsaw-combo-select.
         -->
        <jigsaw-combo-select [(ngModel)]="favoriteFruit" (valueChange)="onFavoriteFruitRemoved($event)"
                             name="favoriteFruit" width="250px">
            <ng-template>
                <div style="padding: 6px; width: 700px; background: #fff">
                    <jigsaw-table [data]="fruitList" [columnDefines]="columnDef" [selectedRow]="selectedIndex"
                                  (selectChange)="onFavoriteFruitChange($event)"></jigsaw-table>
                </div>
            </ng-template>
        </jigsaw-combo-select>
    </div>
    <div class="field">
        <label>Favorite Cities</label>
        <jigsaw-tile [(ngModel)]="favoriteCities" name="favoriteCities" width="250px" trackItemBy="label">
            <jigsaw-tile-option *ngFor="let item of [
                    {label: 'Bei Jing'}, {label: 'Shang Hai'}, {label: 'Nan Jing'},
                    {label: 'Chang Sha'}, {label: 'Cheng Du'}, {label: 'Chong Qing'}]" [value]="item" width="72">
                {{item.label}}
            </jigsaw-tile-option>
        </jigsaw-tile>
    </div>
    <div class="field">
        <label>Score</label>
        <jigsaw-slider [ngModel]="score" name="score" width="250px"></jigsaw-slider>
    </div>
    <div class="field">
        <label>Jigsaw is Great?</label>
        <jigsaw-switch [ngModel]="isGreat" name="isGreat"></jigsaw-switch>
    </div>
    <div class="field">
        <label></label>
        <jigsaw-checkbox [ngModel]="remember" name="remember">Remember me</jigsaw-checkbox>
    </div>

    <div class="field separated">
        <label></label>
        <button jigsaw-button type="submit" colorType="primary" [disabled]="!form.valid">Submit</button>
    </div>
</form>

<div class="result">
    <p>Submit the form, and the form value should be shown here:</p>
    <p>{{formValue|json}}</p>
</div>


